<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="50%"
    append-to-body
    :close-on-click-modal="false">
    <div style="width: 100%;height: 100%;">
      <p v-html='articleName' style="text-align:center;font-size: 20px">{{articleName}}</p>
      <div class="ql-container ql-snow">
      <div v-html='articleContent' class="ql-editor">
        {{articleContent}}
      </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  name: "myArticleContentInfo",
  data() {
    return {
      // 弹出层标题
      title: "",
      open:false,
      articleName:undefined,
      articleContent:undefined,
    }
  },
  methods: {
    dialogVisible(){
      this.open = false
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep img {
  max-width: 100%;
  width: 100%;
  max-height: 100%;
  height: 100%;
}
::v-deep iframe{
  max-width: 100%;
  width: 100%;

}
</style>
